<template>
  <GlobalContainer className="!bg-[#F3F3F3]" :backgroundImage="`${OSS_URL}/images/jiaofei/jiaofei_bg.png`">
    <GlobalHeader title="缴费记录" :fixed="true" showBack :backgroundImage="`${OSS_URL}/images/jiaofei/jiaofei_bg.png`" />
    <div class="p-24 pb-280">
      <div class="payment-box">
        <div class="order-info">
          <div class="line1 flex items-center">
            <div class="text-34 leading-50 text-[#303133]">{{ orderDetail.orderNo }}</div>
            <div class="status ml-auto" :class="statusClassMap[orderDetail.status]">{{ statusMap[orderDetail.status] }}</div>
          </div>
          <div class="line2">
            <div class="mt-16 text-28 leading-42 text-[#909399]">{{ orderDetail.createTime }}</div>
          </div>
        </div>
        <div class="my-32 h-1 w-full bg-[#E6E8EB]" />

        <div class="payment-list">
          <template v-for="(item, index) in list" :key="index">
            <div class="payment-item" v-if="item.list.length > 0">
              <div class="payment-item-title flex items-center">
                <image class="mr-20 size-40" :src="item.icon" />
                <span>{{ item.name }}</span>
              </div>
              <div class="payment-item-list">
                <div class="payment-item-list-item flex items-center" v-for="(item, index) in item.list" :key="index">
                  <div class="select" :class="item.active && 'select-active'" />
                  <span>{{ item.propertyTitle }}</span>
                  <span class="price ml-auto">{{ item.price }}</span>
                </div>
              </div>
              <div class="my-32 h-1 w-full bg-[#E6E8EB]" />
            </div>
          </template>
          <div class="total flex items-center">
            <div class="total-title text-30 font-normal text-[#303133]">总计</div>
            <div class="total-price ml-auto text-34 font-bold text-[#F04864]">￥{{ orderDetail.payPrice }}</div>
          </div>
        </div>
      </div>
    </div>
    <div v-if="timeout > 0" class="btn-c px-30 py-20 pb-safe">
      <div class="mb-24 text-26 text-[#303133]">
        订单剩余支付：<span class="mx-8 text-[#F04864]">{{ formatTime }}</span> 请及时支付
      </div>
      <div class="div flex items-center justify-between" v-if="orderDetail.status === 10">
        <div class="btn mr-20 border-[#CDD0D6] !bg-white !text-[#606266]" @tap="cancelOrderHandle">取消预约</div>
        <div class="btn" @tap="payHandle">立即支付</div>
      </div>
    </div>
  </GlobalContainer>
</template>

<script setup>
import { useAccountStore } from '@/store'
import { getPropertyOrderDetail, propertyCancelOrder, propertyPayment } from '@/common/api/order'
const OSS_URL = import.meta.env.VITE_OSS_URL
const accountStore = useAccountStore()
// 0-已关闭 10-待支付 20-待服务 25-申请退款 30-待验收 40-已完成 60-已退款
const statusMap = {
  10: '未支付',
  20: '已支付',
  0: '已取消'
}
const statusClassMap = {
  10: 'status-wait',
  20: 'status-pay',
  0: 'status-cancel'
}

onLoad(options => {
  getDetail(options.id)
})

const orderDetail = ref({})
const list = ref([])
const getDetail = id => {
  getPropertyOrderDetail({ id }).then(res => {
    console.log('[ getDetail ] >', res)
    orderDetail.value = res
    if (res.closingTime) {
      timeout.value = (new Date(res.closingTime.replace(/-/g, '/')).getTime() - new Date().getTime()) / 1000
    }
    countDown(timeout.value)
    const homeList = []
    const carList = []
    res.propertyOrderDetailsList.forEach(item => {
      if (item.type === 0) {
        homeList.push(item)
      } else {
        carList.push(item)
      }
    })
    list.value = [
      {
        name: accountStore.roomInfo,
        icon: `${OSS_URL}/images/jiaofei/home_icon.png`,
        list: homeList
      },
      {
        name: '车位费',
        icon: `${OSS_URL}/images/jiaofei/car_icon.png`,
        list: carList
      }
    ]
  })
}

const timeout = ref(0)
const formatTime = computed(() => {
  return `${Math.floor(timeout.value / 60)}:${parseInt(timeout.value % 60)}`
})
const countDown = closingTime => {
  function countDownHandle() {
    setTimeout(() => {
      if (timeout.value < 1) {
        return
      } else {
        countDownHandle()
        timeout.value = --timeout.value
      }
    }, 1000)
  }
  countDownHandle()
}

const cancelOrderHandle = () => {
  propertyCancelOrder(orderDetail.value.id).then(res => {
    if (res) {
      uni.showToast({
        title: '取消成功',
        icon: 'success'
      })
      getDetail(orderDetail.value.id)
    }
  })
}
const payHandle = () => {
  propertyPayment({
    orderNo: orderDetail.value.orderNo
  }).then(res => {
    if (res) {
      propertyPayment({
        orderNo: res.orderNo
      }).then(res => {
        if (res.prepayId) {
          uni.requestPayment({
            provider: 'wxpay',
            timeStamp: String(res.timeStamp),
            nonceStr: res.nonceStr,
            package: 'prepay_id=' + res.prepayId,
            signType: 'SHA256withRSA',
            paySign: res.paySign,
            orderInfo: {
              appId: '',
              timeStamp: String(res.timeStamp),
              nonceStr: res.nonceStr,
              package: ''
            },
            success: function (res) {
              getOrderList(statusBarActive.value)
            },
            complete: function () {}
          })
        }
      })
    }
  })
}
</script>

<style lang="scss" scoped>
.payment-box {
  background: #fcfeff;
  border-radius: 20rpx;
  border: 1rpx solid #ffffff;
  padding: 40rpx 34rpx 50rpx 42rpx;
}

.payment-item-title {
  font-size: 32rpx;
  color: #303133;
  line-height: 1;
}
.payment-item-list-item {
  margin-top: 36rpx;
  font-size: 30rpx;
  color: #2e3a59;
  line-height: 46rpx;
  .price {
    color: #303133;
  }
}

.status {
  width: 118rpx;
  height: 52rpx;
  text-align: center;
  line-height: 52rpx;
  font-weight: 400;
  font-size: 26rpx;
  color: #ffffff;
  box-shadow: inset 0rpx 8rpx 16rpx 0rpx rgba(255, 255, 255, 0.3);
  border-radius: 12rpx 0rpx 12rpx 0rpx;
}
.status-wait {
  background: linear-gradient(303deg, #ff9933 0%, #ff8000 100%);
}
.status-cancel {
  background: linear-gradient(303deg, #a3b4cc 0%, #8fa1b2 100%);
}
.status-pay {
  background: linear-gradient(303deg, #3389ff 0%, #339aff 100%);
}
.payment-btn {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #ffffff;
  padding-left: 30rpx;
  box-shadow: 0rpx -2rpx 12rpx 0rpx rgba(89, 118, 178, 0.15);
  .timeout {
    font-size: 26rpx;
    color: #303133;
    line-height: 40rpx;
  }
}
.btn-c {
  position: fixed;
  bottom: 12rpx;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 100;
  background: #fff;
  .btn {
    flex: 1;
    height: 94rpx;
    background: #1e90ff;
    border-radius: 10rpx 10rpx 10rpx 10rpx;
    text-align: center;
    line-height: 94rpx;
    color: #fff;
    font-size: 32rpx;
    border-width: 1px;
  }
}
.cancel-btn {
  color: #606266;
  border-color: #cdd0d6;
}
.pay-btn {
  margin-left: 20rpx;
  background: #1e90ff;
}
</style>
